<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="header" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;">
      <view class="header-content">
        <text class="header-title">明小刚-总经办</text>
        <view class="header-right">
          <view class="hours-btn" @tap="goToHoursPage">
            <text class="hours-icon">📊</text>
          </view>
          <text class="dots">•••</text>
          <view class="record-btn">
            <text class="record-icon">⊙</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input class="search-input" placeholder="请输入项目号" v-model="searchKeyword" />
        <text class="search-btn">搜索</text>
      </view>
    </view>

    <!-- 项目列表 -->
    <view class="project-list">
      <view class="project-item" v-for="(item, index) in filteredProjectList" :key="index" @tap="openProjectModal(item)">
        <view class="project-left">
          <text class="check-icon">✓</text>
          <text class="project-name">{{ item.name }}</text>
          <text class="work-hours" v-if="item.totalHours > 0">{{ item.totalHours }}H</text>
        </view>
        <view class="edit-btn">
          <text class="edit-icon">✏️</text>
        </view>
      </view>
      
      <!-- 空搜索结果提示 -->
      <view class="empty-result" v-if="searchKeyword && filteredProjectList.length === 0">
        <text class="empty-text">未找到匹配的项目</text>
        <text class="empty-tip">请尝试使用其他关键词搜索</text>
      </view>
    </view>

    <!-- 项目录入弹窗 -->
    <view class="modal-overlay" v-if="showModal" @tap="closeModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">项目录入</text>
        </view>
        
        <view class="modal-body">
          <view class="input-group">
            <text class="input-label">前期方案工时：</text>
            <input 
              class="input-field" 
              type="number" 
              v-model="workHours.planning" 
              placeholder="0"
            />
            <text class="input-unit">小时</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">机械设计工时：</text>
            <input 
              class="input-field" 
              type="number" 
              v-model="workHours.mechanical" 
              placeholder="0"
            />
            <text class="input-unit">小时</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">电气设计工时：</text>
            <input 
              class="input-field" 
              type="number" 
              v-model="workHours.electrical" 
              placeholder="0"
            />
            <text class="input-unit">小时</text>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @tap="closeModal">取消</button>
          <button class="submit-btn" @tap="submitWorkHours">提交</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      showModal: false,
      currentProject: null,
      workHours: {
        planning: '',
        mechanical: '',
        electrical: ''
      },
      projectList: [
        { name: 'KZL-YB04-30-湖南长沙湘油泵', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB05-12-湖南长沙湘油泵', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB06-27-湖南衡阳湘油泵', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB06-28-湖南衡阳湘油泵', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB06-29-湖南衡阳湘油泵', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB07-15-广东深圳华为技术', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB08-23-浙江杭州阿里巴巴', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB09-41-江苏南京中兴通讯', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB10-18-北京海淀百度科技', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB11-32-上海浦东腾讯云计算', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB12-07-四川成都京东物流', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB13-25-山东青岛海尔集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB14-39-河南郑州富士康', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB15-11-湖北武汉东风汽车', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB16-28-安徽合肥美的电器', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB17-33-福建厦门厦门航空', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB18-19-重庆渝北长安汽车', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB19-42-陕西西安比亚迪', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB20-06-江西南昌江铃汽车', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB21-24-天津滨海天士力', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB22-37-辽宁沈阳沈飞集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB23-13-黑龙江哈尔滨哈电集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB24-29-吉林长春一汽集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB25-45-内蒙古包头包钢集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB26-08-新疆乌鲁木齐特变电工', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB27-21-宁夏银川宁夏电投', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB28-34-青海西宁青海盐湖', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB29-16-甘肃兰州兰石集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB30-40-云南昆明云南铜业', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 },
        { name: 'KZL-YB31-09-贵州贵阳茅台集团', totalHours: 0, planningHours: 0, mechanicalHours: 0, electricalHours: 0 }
      ]
    }
  },
  computed: {
    filteredProjectList() {
      if (!this.searchKeyword) {
        return this.projectList
      }
      return this.projectList.filter(item => 
        item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
    }
  },
  methods: {
    openProjectModal(project) {
      this.currentProject = project
      this.showModal = true
      // 加载已有的工时数据
      this.workHours = {
        planning: project.planningHours > 0 ? project.planningHours.toString() : '',
        mechanical: project.mechanicalHours > 0 ? project.mechanicalHours.toString() : '',
        electrical: project.electricalHours > 0 ? project.electricalHours.toString() : ''
      }
    },
    closeModal() {
      this.showModal = false
      this.currentProject = null
    },
        submitWorkHours() {
      // 验证输入
      if (!this.workHours.planning && !this.workHours.mechanical && !this.workHours.electrical) {
        uni.showToast({
          title: '请至少输入一项工时',
          icon: 'none'
        })
        return
      }
      
      // 找到当前项目在列表中的索引
      const projectIndex = this.projectList.findIndex(project => project.name === this.currentProject.name)
      
      if (projectIndex !== -1) {
        // 更新项目的工时数据
        this.projectList[projectIndex].planningHours = Number(this.workHours.planning) || 0
        this.projectList[projectIndex].mechanicalHours = Number(this.workHours.mechanical) || 0
        this.projectList[projectIndex].electricalHours = Number(this.workHours.electrical) || 0
        
        // 计算总工时
        this.projectList[projectIndex].totalHours = 
          this.projectList[projectIndex].planningHours + 
          this.projectList[projectIndex].mechanicalHours + 
          this.projectList[projectIndex].electricalHours
        
        // 保存工时记录到本地存储
        this.saveHoursToStorage(this.projectList[projectIndex])
      }
      
      // 显示成功提示
      uni.showToast({
        title: '工时录入成功',
        icon: 'success'
      })
      
      console.log('项目:', this.currentProject.name)
      console.log('工时数据:', this.workHours)
      console.log('总工时:', this.projectList[projectIndex].totalHours)
      
            this.closeModal()
    },
    
    saveHoursToStorage(project) {
      try {
        // 获取当前时间
        const currentDate = new Date()
        const recordDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`
        const recordMonth = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}`
        
        // 创建工时记录
        const hoursRecord = {
          name: project.name,
          totalHours: project.totalHours,
          planningHours: project.planningHours,
          mechanicalHours: project.mechanicalHours,
          electricalHours: project.electricalHours,
          recordDate: recordDate,
          recordMonth: recordMonth,
          recordTime: currentDate.getTime() // 用于唯一标识
        }
        
        // 获取现有记录
        let existingRecords = []
        try {
          const storedData = uni.getStorageSync('projectHours')
          if (storedData) {
            existingRecords = JSON.parse(storedData)
          }
        } catch (e) {
          console.log('读取存储数据失败:', e)
        }
        
        // 检查是否已存在该项目的本月记录，如果存在则更新，否则添加新记录
        const existingIndex = existingRecords.findIndex(record => 
          record.name === project.name && record.recordMonth === recordMonth
        )
        
        if (existingIndex !== -1) {
          // 更新现有记录
          existingRecords[existingIndex] = hoursRecord
        } else {
          // 添加新记录
          existingRecords.push(hoursRecord)
        }
        
        // 保存到本地存储
        uni.setStorageSync('projectHours', JSON.stringify(existingRecords))
        
        console.log('工时记录已保存:', hoursRecord)
      } catch (e) {
        console.log('保存工时记录失败:', e)
                 uni.showToast({
           title: '保存失败，请重试',
           icon: 'none'
         })
       }
     },
     
     goToHoursPage() {
       uni.navigateTo({
         url: '/pages/hours/index'
       })
     }
  },
  onLoad: function() {
    
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  background: linear-gradient(135deg, #4169E1, #6A5ACD);
  padding: 20rpx 30rpx;
  padding-top: 60rpx;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.hours-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hours-icon {
  color: white;
  font-size: 24rpx;
}

.dots {
  color: white;
  font-size: 32rpx;
}

.record-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-icon {
  color: white;
  font-size: 24rpx;
}

/* 搜索框 */
.search-container {
  padding: 30rpx;
  background: linear-gradient(135deg, #4169E1, #6A5ACD);
}

.search-box {
  background-color: white;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 80rpx;
}

.search-icon {
  margin-right: 20rpx;
  font-size: 32rpx;
  color: #999;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.search-btn {
  color: #4169E1;
  font-size: 28rpx;
  font-weight: bold;
}

/* 项目列表 */
.project-list {
  background-color: white;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.project-item:last-child {
  border-bottom: none;
}

.project-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.check-icon {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.project-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-hours {
  font-size: 28rpx;
  color: #4169E1;
  font-weight: bold;
  background-color: #E6F0FF;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #4169E1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-icon {
  color: white;
  font-size: 24rpx;
}

/* 空搜索结果提示 */
.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.empty-tip {
  font-size: 28rpx;
  color: #ccc;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 20rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  text-align: center;
  padding: 40rpx 30rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.modal-body {
  padding: 40rpx 30rpx;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 20rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  width: 200rpx;
  flex-shrink: 0;
}

.input-field {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  background-color: transparent;
  border: none;
  outline: none;
}

.input-unit {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.cancel-btn {
  flex: 1;
  height: 88rpx;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  font-size: 32rpx;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 0;
}

.submit-btn {
  flex: 1;
  height: 88rpx;
  background-color: #4169E1;
  color: white;
  border: none;
  font-size: 32rpx;
  font-weight: bold;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 20rpx;
}




</style>
